<script setup lang="ts">
import {reactive, ref} from "vue";
import {FormInstance, Message} from "@arco-design/web-vue";
import useFormSubmit from "@/hooks/useFormSubmit.ts";
import type {ModuleType} from "@/types/moduleType.ts";
import type {FormRule} from "@/types/commonType.ts";
import {addModule, updateModule} from "@/services/moduleApi.ts";
import JinDrawer from "@/components/framework/jin-drawer/jin-drawer.vue";
import {dayjs} from "@arco-design/web-vue/es/_utils/date";

const emits = defineEmits<{
  (e: "list") : void
}>()

const add = "添加模块"
const update = "修改模块"

const formRef = ref<FormInstance>()

const beforeSubmit = useFormSubmit(formRef)

const drawerRef = ref<{
  init: () => void;
  close: () => void;
}>();

const dialogProps = reactive({
  visible: false,
  title: '模块对话框',
  okLoading: false,
  okText: '确定',
  cancelText: '取消',
  escToClose: false,
  width: 600,
  maskClosable: false,
})

const formData = reactive<ModuleType>({
  id: '',
  moduleName: "",
  reviewStartTime: "",
  reviewEndTime: ""
})

const rules: FormRule<keyof ModuleType> = {
  moduleName: {
    message: "请输入模块名称",
    required: true
  },
  reviewStartTime: {
    message: "请选择评审开始时间",
    required: true
  },
  reviewEndTime: {
    message: "请选择评审结束时间",
    required: true
  },
  id: {}
}

const handleOk = () => {
  if (dialogProps.title === add) {
    addModule(formData).then((res) => {
      if (res.code === 200) {
        Message.success("添加成功")
        drawerRef.value?.close()
        emits("list")
      }
    })
  }
  if (dialogProps.title === update) {
    updateModule(formData).then((res) => {
      if (res.code === 200) {
        Message.success("修改成功")
        drawerRef.value?.close()
        emits("list")
      }
    })
  }
}

const handleClose = () => {
  dialogProps.visible = false
  drawerRef.value?.close()
}

const handleChange = () => {
  formData.reviewEndTime = ""
  formRef.value?.clearValidate(['reviewEndTime'])
}

const setFormData = (data?: ModuleType) => {
  if (data) {
    Object.assign(formData, data);
  } else {
    formData.id = '';
    formData.moduleName = '';
    formData.reviewStartTime = '';
    formData.reviewEndTime = '';
  }
};

const init = () => {
  setFormData()
  dialogProps.title = add
  dialogProps.visible = true
  formRef.value?.clearValidate()
  drawerRef.value?.init()
}

const edit = (row: ModuleType) => {
  setFormData(row)
  dialogProps.title = update
  dialogProps.visible = true
  formRef.value?.clearValidate()
  drawerRef.value?.init()
}

const endDisabledDate = (current: string) => {
  if (formData.reviewStartTime){
    return dayjs(current).isBefore(dayjs(formData.reviewStartTime))
  }
  return dayjs(current).isBefore(dayjs())
}

defineExpose({
  init,
  edit
})
</script>

<template>
  <jin-drawer
      :width="500"
      ref="drawerRef"
      :title="dialogProps.title"
      @beforeOk="beforeSubmit"
      @cancel="handleClose"
      @ok="handleOk"
  >
    <a-form ref="formRef" :model="formData" :rules="rules" auto-label-width>
      <a-form-item label="模块名称" field="moduleName">
        <a-input v-model="formData.moduleName" placeholder="请输入模块名称"/>
      </a-form-item>
      <a-form-item field="reviewStartTime" label="评审开始时间">
        <a-date-picker
            style="width: 100%"
            placeholder="请选择评审开始时间"
            format="YYYY-MM-DD HH:mm:ss"
            show-time
            v-model="formData.reviewStartTime"

            @change="handleChange"
        />
      </a-form-item>
      <a-form-item field="reviewEndTime" label="评审结束时间">
        <a-date-picker
            style="width: 100%"
            placeholder="请选择评审结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            show-time
            v-model="formData.reviewEndTime"
            :disabledDate="endDisabledDate"
        />
      </a-form-item>
    </a-form>
  </jin-drawer>
</template>

<style scoped lang="scss">

</style>